<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .billboard {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 1px solid black;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }
        
        .content {
            position: absolute;
            width: 160px;
            /* transition: top 0.5s;*/
        }
    </style>
    <script>
        window.onload = function() { //当前页面加载完后开始执行
            var content = document.querySelector(".content"); //取得content的元素
            var top = 20;
            // console.log(content.scrollHeight);
            var height = content.scrollHeight;
            var timer = setInterval(function() { //循环函数,每一秒执行一次
                top = top - 10;
                if (top < -height - 20 - 20) {
                    top = 200 + 20 + 20;
                }
                content.style.top = top + "px";
            }, 100);

        }
    </script>
</head>

<body>

    <h1>公告栏</h1>
    <div class="billboard">
        <div class="content">
            南宋宁宗庆元年间（1195—1200年）某岁末，隐居临安郊外牛家村的忠良之后郭啸天、杨铁心家遭横祸，被与金国王子完颜洪烈勾结的南宋官府害死，已怀身孕的郭夫人李萍、杨夫人包惜弱也双双失踪，噩耗传来，郭、杨的好友全真教道士丘处机怒不可遏，对杀害郭、杨的凶手进行了追杀。他惦念失散的朋友家眷，在临安一带四处奔走打探未果；接着又因受奸人段天德蒙骗在嘉兴与江南七怪发生冲突，两败俱伤。事后，丘处机与江南七怪识破奸人阴谋，释兵言和，但比武未分胜负，丘处机相约江南七怪一同寻人，由自己去救助杨铁心妻子包惜弱，江南七怪去救助郭啸天妻子李萍，并各自将两家的孩子教养成人，十八年后重会嘉兴，由郭杨后人代为比武再分胜负。江南七怪义薄云天，慨然应诺。
        </div>
    </div>
</body>

</html>